<template>
  <div class="v2-container">

  <v2-main class="pd-20px " :isSd="false">
    <v2-header :height="40">
      <template #right>
        <el-input placeholder="请输入内容" v-model="params.siteName" class="input-with-select" size="small">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </template>
    </v2-header>
      <el-row>
        <el-col :span="6" v-for="item of sites" class="pd-10px">
          <div class="col-item">
            <div class="cover-box" @click="toLearn(item)">
              <img :src="item.cover" @error="loadError($event)"/>
            </div>
            <div class="mar-t-20px dis-col-item">
              <span v-text="item.siteName"></span>
              <span>
                <el-dropdown>
                <span>
                  <i class="el-icon-more font-20px col-409eff"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="updateSite(1 , item)">
                    <i class="el-icon-edit-outline col-409eff font-20px"></i>
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="del(item.id)">
                        <i class="el-icon-delete col-danger font-20px"></i>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              </span>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="pd-10px">
          <div class="col-item">
            <el-empty class="cover-box"></el-empty>
            <div class="text-center">
              <el-button type="info" plain size="mini" @click="updateSite(0)"><i class="el-icon-plus "></i><span>添加</span></el-button>
            </div>
          </div>

        </el-col>
      </el-row>
    <el-row >
      <el-col :span="24" v-show="total >10">
        <el-pagination background
                       :current-page="current"
                       :page-size="size"
                       @sizeChange="pageChange"
                       layout="prev, pager, next"
                       :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </v2-main>
    <dialog-form v-model="siteShow" :title="siteDialogTitle" :fields="formRows" @submit="submit" :form-data="currData"></dialog-form>
  </div>
</template>

<script>
import v2Main from "components/v2-cps/v2-main";
import site from "api/learn/site";
import ApiPageService from "api/ApiPageService";
const apiPageService = new ApiPageService(site)
import ApiResponse from "utils/ApiResponse";
import dialogForm from "components/v2-form/dialogForm";

import util from "utils/util";
import V2Header from "components/v2-cps/v2-header";
import Constants from "@/Constants";
export default {
  name: "index" ,
  components:{
    V2Header,
    v2Main ,
    dialogForm
  },
  data(){
    return {
      siteShow: false  ,
      currentStatus: 0 ,
      currData: {},
      current: 1 ,
      size: 10 ,
      sites:[] ,
      params: {
        siteName: null
      } ,
      total: 0 ,
      formRows: [
        {
          title: '站点名称',
          key: 'siteName' ,
          required: true ,
        },
        {
          title: '站点地址',
          key: 'path' ,
          required: true ,
        },
        {
          title: '站点logo',
          key: 'cover' ,
        },
        {
          title: '排序',
          key: 'sort' ,
          is: 'number'
        },
        {
          title: '描述',
          key: 'desc' ,
          attrs:{
            type:  'textarea'
          }
        },
      ]
    }
  },
  created() {
    this.getList();
  },
  methods:{
    loadError(ele){
      ele.target.src = "/imgs/kj.jpg"
    },
    toLearn(site){
      this.$store.commit(Constants.setSite ,site )
      window.open(site.path)
      //this.$router.push("/siteTool")
    },
    updateSite(status , item = {}){
      this.currentStatus = status ;
      this.currData = item ;
      this.siteShow = true ;
    },
    submit(formData){
      site.update(formData).then(res=>{
        let response = new ApiResponse(res) ;
        response.print().ok(()=>{
          this.getList()
          this.siteShow = false
        })
      })
    },
    search(){
      site.getList(1 ,this.size , this.params).then(res=>{
        let response = new ApiResponse(res)
        response.execute((data)=>{
          this.sites = data.records
        })
      })
    } ,
    getList(){
      site.getList(this.current ,this.size , this.params).then(res=>{
        let response = new ApiResponse(res)
        response.execute((data)=>{
          this.sites = data.rows
        })
      })
    },
    pageChange(page){
      console.log(page)
    },
    getPath(cover){
      if(util.isEmpty(cover)){
        return "/imgs/kj.jpg"
      }
      return cover

    },
    del(id){
      site.remove(id).then(res=>{
        let response = new ApiResponse(res) ;
        response.print() ;
        response.ok(this.getList)
      })
    }
  },
  computed:{
    ...apiPageService.computed() ,
    siteDialogTitle(val){
      return this.currentStatus === 0 ? "添加站点" : "更新站点"
    }
  }
}
</script>

<style scoped>
.v2-container{
  height: calc(100% - 60px);
  overflow: auto;
  box-sizing: border-box;
}
    .col-item{
      height: 240px;
      box-sizing: border-box;
      padding: 16px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 4px #ddd;
      cursor: pointer;
    }
    .cover-box{
      overflow: hidden;
      width: 100%;
      height: 160px;
      align-items: center;
      display: flex;
    }
    .cover-box>img{
      width: 100%;
      height: auto;
    }
    .dis-col-item{
      display: flex;
      justify-content: space-between;
    }
    .el-empty{
      padding: 0;
    }
</style>
